<template>
  <div>
    <table>
      <MyTr
        v-for="(item, index) in goodsArr"
        :key="index"
        :goodsName="item.goodsName"
        v-model.number="item.count"
      ></MyTr>
    </table>
    <h1>ALL Number：{{ all }}</h1>
  </div>
</template>

<script>
import MyTr from "./components/my-tr.vue";
export default {
  // nam e: "",
  components: { MyTr },
  props: {},
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
    };
  },
  computed: {
    all() {
      return this.goodsArr.reduce((pre, item) => pre + item.count, 0);
    },
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped></style>
